<template>
  <div class="nanning-screen-checkbox">
    <div class="nanning-screen-checkbox-title" :class="[visibleCheckboxList ? '' : 'unfold-border unfold']" @click="onChangeVisible">全部列表</div>
    <transition name="draw">
      <div class="nanning-screen-checkbox-content" v-show="visibleCheckboxList" :style="{ '--heightNumber': heightNumber }">
        <div class="nanning-screen-checkbox-content-box">
          <el-checkbox-group v-model="checkedLabel" :min="0" :max="3" @change="onChangeCheckbox()">
            <el-checkbox v-for="item in checkboxList" :label="item.value" :key="item.label">
              <img :src="item.imgUrl" alt="" srcset="" />
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="nanning-screen-checkbox-content-bottom packup" @click="onChangeVisible">收起</div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, VModel } from 'vue-property-decorator'
@Component({
  name: 'nanning-screen-checkbox'
})
export default class NanningScreenCheckbox extends Vue {
  @Prop({
    default: () => [
      { value: 1, label: '安保人员', imgUrl: require('assets/images/situational-awareness/checkbox-icon1.png') },
      { value: 2, label: '勤务力量', imgUrl: require('assets/images/situational-awareness/checkbox-icon2.png') },
      { value: 3, label: '案事件', imgUrl: require('assets/images/situational-awareness/checkbox-icon3.png') },
      { value: 4, label: '警情', imgUrl: require('assets/images/situational-awareness/checkbox-icon4.png') },
      { value: 5, label: '人脸预警', imgUrl: require('assets/images/situational-awareness/checkbox-icon5.png') },
      { value: 6, label: '违禁品', imgUrl: require('assets/images/situational-awareness/checkbox-icon6.png') },
      { value: 7, label: '公交站', imgUrl: require('assets/images/situational-awareness/checkbox-icon7.png') },
      { value: 8, label: '公交线路', imgUrl: require('assets/images/situational-awareness/checkbox-icon8.png') },
      { value: 9, label: '实时车辆', imgUrl: require('assets/images/situational-awareness/checkbox-icon9.png') },
      { value: 10, label: '客运站', imgUrl: require('assets/images/situational-awareness/checkbox-icon10.png') },
      { value: 11, label: '客运路线', imgUrl: require('assets/images/situational-awareness/checkbox-icon11.png') }
    ]
  })
  private checkboxList!: any[] // 多选框循环的数据

  @Prop({ default: false }) private visibleCheckboxList!: boolean // 多选框的显示隐藏

  @VModel()
  checkedLabel!: any[] // 默认选中的项 checkboxList的value对应

  private heightNumber = this.checkboxList.length // 默认的高度

  @Emit()
  private onChangeVisible() {
    return !this.visibleCheckboxList
  }

  @Emit()
  private onChangeCheckbox() {
    return this.checkedLabel
  }
}
</script>

<style lang="scss" scoped>
.nanning-screen-checkbox {
  box-sizing: border-box;
  width: 160px;
  // height: 464px;
  height: auto;
  font-family: 'PingFang Regular';
  &-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #07569e;
    background-size: 100% 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 18px;
    color: '#fff';
  }
  &-content {
    box-sizing: border-box;
    width: 100%;
    height: calc(35px * var(--heightNumber) + 60px);
    overflow: hidden;
    &-box {
      box-sizing: border-box;
      width: 100%;
      padding: 17px 17px 13px 12px;
      background: #061b5b;
      .el-checkbox-group {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
      }
      /deep/ .el-checkbox {
        flex-shrink: 0;
        width: 100%;
        // height: calc(100% / 11);
        height: 35px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #27c9ff;
          border-color: #27c9ff;
        }
        .el-checkbox__label {
          padding-left: 0;
          font-size: 16px;
          color: #ffffff;
          img {
            width: 26px;
            height: 26px;
            vertical-align: middle;
          }
        }
      }
    }
    &-bottom {
      box-sizing: border-box;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background: url('../../assets/images/situational-awareness/packup.png') no-repeat center;
      background-size: 100% 100%;
      color: #010340;
      font-weight: 500;
      font-size: 16px;
      text-align: center;
    }
    .packup {
      position: relative;
      &::after {
        position: absolute;
        top: 40%;
        left: 70%;
        transform: translate(-50%, -50%);
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent #012992 transparent;
      }
    }
  }
  .unfold-border {
    background: rgb(7, 43, 109);
    border: 1px solid #067ad9;
    border-radius: 8px;
  }
  .unfold {
    position: relative;
    &::after {
      position: absolute;
      top: 50%;
      left: 80%;
      transform: translate(-50%, 0%);
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-width: 8px;
      border-style: solid;
      border-color: #012992 transparent transparent transparent;
    }
  }
  .draw-enter-active,
  .draw-leave-active {
    transition: all 0.5s linear;
  }
  .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
    height: 0;
  }
}
</style>
